<template>
    <div>
        <div>
            <el-breadcrumb separator="/" style="margin: 8px;">
                <el-breadcrumb-item>知识图谱</el-breadcrumb-item>
                <el-breadcrumb-item>知识图谱展示</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <h3>知识图谱展示</h3>
            <div style="margin-top: 20px;">
                <el-form :inline="true" ref="query" :model="query" label-width="100px">

                    <el-form-item label="单节点查找:">
                        <el-input v-model="query.deviceNo" clearable class="common-width" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="点-点查找:">
                        <el-input v-model="query.deviceNo" clearable class="common-width" placeholder="起点"></el-input>
                        <span style="margin: 8px;">至</span>
                        <el-input v-model="query.deviceNo" clearable class="common-width" placeholder="终点"></el-input>
                    </el-form-item>
                    <br />
                    <el-form-item label="布局:">
                        <el-input v-model="query.deviceNo" clearable class="common-width" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item class="leftmargin">
                        <el-button type="primary" size="mini" @click="getData">确定</el-button>
                        <el-button type="info" size="mini" @click="handleClean">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-divider></el-divider>
            <div class="flex_div">
                <div ref="mountNode" id="mountNode" class="echart"></div>
                <el-tabs class="right" type="border-card">
                    <el-tab-pane label="点信息">
                        <table class="right_table" cellspacing="0">
                            <tr>
                                <td class="label">label</td>
                                <td class="data">domain_attack</td>
                            </tr>
                            <tr>
                                <td class="label">label</td>
                                <td class="data">domain_attack</td>
                            </tr>
                        </table>
                    </el-tab-pane>
                    <el-tab-pane label="线信息">
                        <table class="right_table" cellspacing="0">
                            <tr>
                                <td class="label">label</td>
                                <td class="data">domain_attack312</td>
                            </tr>
                            <tr>
                                <td class="label">label</td>
                                <td class="data">domain_attac412412k</td>
                            </tr>
                        </table>
                    </el-tab-pane>
                </el-tabs>
            </div>


        </div>
    </div>
</template>
<script>
import G6 from '@antv/g6';
import mockData from './data.js'
import jiedianData from './jiedian.json'
import bianData from './bian.json'
import newData from './newData.json'
export default {
    data() {
        return {
            query: {
                deviceNo: '',
                pageNum: 1,
                pageSize: 10
            },
            tableData: [],
            pointList: [], //点列表
            linkList: [], //线列表
            option: {},
            graph: null,
            graphData: {}
        };
    },
    mounted() {
        this.initData()
        this.initGraph();
    },
    methods: {
        handleClean() { },
        getData() { },
        initData() {
            console.log("节点原始数据", newData)
            let nodes = []
            let edges = []
            nodes = newData.nodes.map(item => {
                let nodeItem = item.properties
                return {
                    id: nodeItem.id,
                    label: `${nodeItem.ml_stage_of_attack || ''}\n${nodeItem.name}`,
                    data: nodeItem
                }
            })
            edges = newData.edges.map(item => {
                return {
                    source: item.source,
                    target: item.target,
                    label: item.properties.relationship
                }
            })
            this.graphData = {
                nodes,
                edges
            }
            console.log("graphData", this.graphData)
        },
        initGraph() {
            const container = this.$refs.mountNode
            const menu = new G6.Menu({
                offsetX: 6,
                offsetX: 10,
                itemTypes: ['node'],
                getContent(evt) {
                    console.log("evt", evt.item.getModel())
                    return `<ul class="g6-menu">
                        <li data-type="drillDown">下钻</li>
                        <li data-type="otherAction">其他操作</li>
                    </ul>`;
                },
                handleMenuClick: (target, item) => {
                    const type = target.getAttribute('data-type');
                    console.log(target, item)
                    if (type === 'drillDown') {
                        const nodeId = item.getID();
                        const newNodeId = `newNode_${Math.random()}`;
                        let newData = this.graph.save()
                        console.log("newData", newData)
                        newData.nodes.push({
                            id: newNodeId,
                            label: newNodeId
                        })
                        newData.edges.push({
                            source: nodeId,
                            target: newNodeId,
                            label: '线7',
                        })
                        this.graph.changeData(newData)
                        console.log('下钻', nodeId);
                    } else if (type === 'otherAction') {
                        console.log('其他操作');
                        this.graph.updateLayout({
                            type: 'force',
                        });
                    }
                },
            });
            const graph = new G6.Graph({
                container: container,
                width: container.clientWidth,
                height: container.clientHeight,
                fitCenter: true,
                plugins: [menu], // 配置 Menu 插件
                layout: {
                    type: 'dagre',
                    rankdir: 'TB', // 可选，默认为图的中心
                },
                defaultNode: {
                    type: 'circle',
                    color: '#5B8FF9',
                    style: {
                        fill: '#9EC9FF',
                        lineWidth: 3,
                    },
                    labelCfg: {
                        position: 'bottom',
                    },
                },
                defaultEdge: {
                    labelCfg: {
                        autoRotate: true,
                        style: {
                            fill: '#1890ff',
                            fontSize: 14,
                            background: {
                                fill: '#ffffff',
                                stroke: '#9EC9FF',
                                padding: [2, 2, 2, 2],
                                radius: 2,
                            },
                        },
                    },
                },
                modes: {
                    default: ['drag-canvas', 'drag-node', 'zoom-canvas'],
                },
            });
            this.graph = graph
            graph.data(this.graphData);
            graph.render();

            graph.on('node:contextmenu', this.onNodeContextmenu)
        },
        async onNodeContextmenu(e) {
            const nodeId = e.item.getModel().id;
            console.log("nodeId", nodeId)
        },
    }
};
</script>

<style scoped>
.common-width {
    width: 250px;
}

.common-select {
    width: 350px;
}

.common-input {
    width: 350px;
}

.small-input {
    width: 225px;
}

.table {
    width: 100%;
    font-size: 14px;
}

.leftmargin {
    margin-left: 55%;
}

.mr10 {
    margin-right: 10px;
}

.form>>>.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 10px;
}

.flex_div {
    display: flex;
    margin-top: 10px;
}

.echart {
    flex: 1;
    height: 500px;
    background-color: rgb(237, 237, 237);
}

.right {
    width: 280px;
}

.right_table {
    border-collapse: collapse;

    tr {
        height: 40px;
    }

    td {
        border: 0.5px solid rgb(198, 198, 198);
    }

    .label {
        width: 100px;
        display: block;
        height: 40px;
        line-height: 40px;
        text-align: right;
        padding-right: 15px;
        background-color: rgb(237, 237, 237);
    }

    .data {
        width: 130px;
        padding-left: 5px;
        background-color: rgb(255, 255, 255);
    }
}
</style>

<style>
.g6-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.g6-menu li {
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.g6-menu li:hover {
    background-color: #f5f7fa;
}

.g6-component-contextmenu {
    padding: 0;
}
</style>
